<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="" id="form"></form>
    <!-- <p>
        <label for="">用户名：</label>
        <input type="text">
    </p>
    <p>
        <label for="">密码：</label>
        <input type="password">
    </p> -->
    <script>
        var arr = [
            {
                label: "用户名",
                name: "username",
                type: "text"
            }, {
                label: "密码",
                name: "password",
                type: "password"
            }, {
                label: "性别",
                name: "gender",
                type: "select",
                value: ['男', '女', '不男', '不女', 'Gay', '妖王']
            }, {
                label: "爱好",
                name: "hobby",
                type: "checkbox",
                value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']
            }, {
                label: '是否已婚',
                name: 'married',
                type: 'radio',
                value: ['已婚', '未婚']
            },
            {
                label: '简介',
                name: 'resume',
                type: 'textarea'
            }];

        var form = document.querySelector('#form');
        // 循环数组 根据数组的数据生成表单
        arr.forEach(function (item, index) {
            // 生成一个p标签
            var p = document.createElement('p');
            var label = document.createElement('label');
            label.innerHTML = item.label + ':';
            p.appendChild(label);

            var input;//不能直接创建input标签，
            // 而是根据 数组对象中 type类型来判断我到底生成什么的标签
            // type为 text，password就生input
            // 如果为 radio，checkbox  就生成 span标签，然后根据对象中的value循环生成input元素
            // type 为select 生成 select标签
            // type 为 textarea 生成textarea
            switch (item.type) {
                case 'text':
                case 'password':
                    input = document.createElement('input');
                    input.type = item.type;
                    input.id = item.name;
                    p.appendChild(input)
                    break
                case 'radio':
                case 'checkbox':
                    // 要来包裹爱好 value循环生成的值
                    input = document.createElement('span');
                    item.value.forEach(function (items, index) {
                        var inp = document.createElement('input');
                        // 存放文字
                        var text = document.createElement('label');
                        text.innerHTML = items;
                        inp.type = item.type;
                        // 给input添加name属性，实现单选按钮的切换
                        inp.name = item.name
                        input.appendChild(inp);
                        input.appendChild(text);
                    })
                    p.appendChild(input)
                    break
                case 'select':
                    input = document.createElement('select');
                    // 循环对象中的value 生成option标签
                    item.value.forEach(function (items, index) {
                        var option = document.createElement('option');
                        option.innerHTML = items;
                        input.appendChild(option)
                    })
                    p.appendChild(input)
                    break
                case 'textarea':
                    input = document.createElement('textarea');
                    p.appendChild(input)
            }
            // 把p标签 添加到form中
            form.appendChild(p)
        })

    </script>
</body>

</html>